﻿@model Auction_Intranet.Models.CreateGroupModel

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("CreateGroupMobile", "CreateGroupMobile", FormMethod.Post, new { @class = "create-group-form black-shadow-box" }))
{
    <div id="progress-create-group">
        <img src="@Url.Content("~/Content/images/icons/loading-stats.gif")" alt="Loading..." />
    </div>
    
    <legend>Create Group</legend>
   
    <div class="create-group-form-errors form-validation-display">          
        @Html.ValidationMessageFor(model => model.name)  
        @Html.ValidationMessageFor(model => model.addedCredit)  
        @Html.ValidationSummary(true)
        <div class="create-group-form-errors-script">
        </div>       
    </div>  
    <div class="hide editor-field">
        @Html.EditorFor(model => model.userId) 
    </div>
    <div class="hide editor-field available-credit">
        <p class="userCredit">@Html.EditorFor(model => model.userBalance)</p>
        @Html.ValidationMessageFor(model => model.userBalance)        
    </div>
    <div class="create-group-form-container-1 col">
        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.name, new {placeholder = "name", autocomplete = "off" })            
        </div>
    </div>
    <div class="amounts col">
        <div class="editor-label">
            <p>@Html.LabelFor(model => model.addedCredit)</p>
            <p>Available: $<span class="available-balance ">@Model.userBalance</span></p>
        </div>
        <div class="editor-field spinner">            
            @Html.TextBoxFor(model => model.addedCredit, new { @class = "spinner-create-group", autocomplete = "off", placeholder = "amount" })
        </div>
    </div>
    <div class="create-group-form-container-3 col">
        <div class="members-label editor-label">
            <p>Members to add</p>
        </div>
        <div class="added-inputs"></div>
        <div class="available-inputs">
                <div class="input-1 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember1, new { @class = "create-group-input ui-widget", id = "input-1", placeholder = "username" })
                <span data-id="input-1" class="add-member-input"></span>
            </div>
            <div class="input-2 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember2, new { @class = "create-group-input ui-widget", id = "input-2", placeholder = "username" })
                <span data-id="input-2" class="add-member-input"></span>
            </div>
                <div class="input-3 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember3, new { @class = "create-group-input ui-widget", id = "input-3", placeholder = "username" })
                <span data-id="input-3"  class="add-member-input"></span>
            </div>
            <div class="input-4 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember4, new { @class = "create-group-input ui-widget", id = "input-4", placeholder = "username" })
                <span data-id="input-4" class="add-member-input"></span>
            </div>
            <div class="input-5 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember5, new { @class = "create-group-input ui-widget", id = "input-5", placeholder = "username" })
                <span data-id="input-5" class="add-member-input"></span>
            </div>
            <div class="input-6 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember6, new { @class = "create-group-input ui-widget", id = "input-6", placeholder = "username" })
                <span data-id="input-6" class="add-member-input"></span>
            </div>
            <div class="input-7 create-group-input hide available">
                @Html.TextBoxFor(model => model.groupMember7, new { @class = "create-group-input ui-widget", id = "input-7", placeholder = "username" })
                <span data-id="input-7" class="add-member-input"></span>
            </div>
        </div>        
    </div>
    <div class="create-group-form-container-4 col">
        <div class="create-group-form-info">
            <p>You will automatically be a member of the group</p>
            <p>Press the green icon to add member</p>
            <p>Max group size 8 members</p>
        </div>    
        <input type="submit" value="Create" class="input-button" title="Create Group" /> <input type="button" value="Cancel" class="input-button" title="Cancel" onclick="goBack()"/>
    </div>
}

<script type="text/javascript">
    $(function () {
        $(".spinner-create-group").spinner({
            max: $(".available-credit input").val(),
            min: 1
        });
    });
</script>
